<template>
  <Card>
    <div id="addVehicle">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        编辑车辆信息
        <Divider/>
      </div>
      <div class="from">
        <Form ref="busForm" :label-width="170" :model="form" :rules="formValidate" inline>
          <div class="fromTitle">基础信息</div>
          <Row>
            <Col span="10">
            <FormItem label="购买批次：">
              <Input v-model="form.batch" placeholder="输入购买批次"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="车辆品牌：" prop="brand">
              <Select v-model="form.brand" :value="form.brand" clearable>
                <Option :value="0">东风牌</Option>
                <Option :value="1">亚星牌</Option>
                <Option :value="2">宇通牌</Option>
                <Option :value="3">中通牌</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="规格型号：">
              <Input v-model="form.model" placeholder="输入规格型号"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="发动机号：">
              <Input v-model="form.engine_num" placeholder="输入发动机号"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="车架号：">
              <Input v-model="form.frame_nun" placeholder="输入车架号"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="车牌号：" prop="license_plate_num">
              <Input v-model="form.license_plate_num" placeholder="输入车牌号"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="原值：">
              <Input v-model="form.original" placeholder="输入原值"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="已折扣额：">
              <Input v-model="form.discount" placeholder="输入折扣额"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="净值：">
              <Input v-model="form.net_worth" placeholder="输入净值"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="旧车牌：">
              <Input v-model="form.old_license_plate_num" placeholder="输入旧车牌"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="发证日期：">
              <DatePicker
                v-model="form.issue_at"
                placeholder="选择时间"
                type="date"
                @on-change="form.issue_at=$event"
              >
              </DatePicker>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="核载人数：">
              <Input v-model="form.max_num" placeholder="输入核载人数"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="开始使用日期：">
              <DatePicker
                v-model="form.start_use_at"
                placeholder="选择时间"
                type="date"
                @on-change="form.start_use_at=$event"
              >
              </DatePicker>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="车长：">
              <Input v-model="form.length" placeholder="输入车长"/>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="凭证号：">
              <Input v-model="form.voucher" placeholder="输入凭证号"/>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="车辆类型：" prop="type">
              <Select v-model="form.type" clearable>
                <Option :value="0">燃气车</Option>
                <Option :value="1">纯电动</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="10">
            <FormItem label="是否纳入考核：" prop="type">
              <Select v-model="form.is_check" clearable>
                <Option :value="1">是</Option>
                <Option :value="0">否</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="10">
            <FormItem label="备注：">
              <Input
                v-model="form.note"
                :rows="5"
                maxlength="300"
                placeholder="请输入备注信息"
                show-word-limit
                type="textarea"
              />
            </FormItem>
            </Col>
          </Row>
          <div class="fromTitle">车辆资质文件</div>
          <div class="tabs">
            <Tabs>
              <TabPane label="上户">
                <div class="btns">
                  <upload-file
                    ref="uploadStartFile"
                    :params="{saveDir: 'bus', type: 'file'}"
                    button-name="上传资料"
                    @on-change="refreshTable($event,'start')"
                  ></upload-file>
                  <Button icon="md-remove" type="error">删除</Button>
                </div>
                <div style="margin-bottom:15px">
                  <Table
                    ref="selection"
                    :columns="columns"
                    :data="dataStart"
                    border
                    height="350"
                    size="small"
                    stripe
                    @on-selection-change="showSelect($event, 'start')"
                  ></Table>
                </div>
                <div style="margin-left:-50px">
                  <FormItem label="上户时间：">
                    <DatePicker
                      v-model="form.start_at"
                      placeholder="选择时间"
                      style="width: 500px"
                      type="date"
                      @on-change="form.start_at=$event"
                    ></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="注册">
                <div class="btns">
                  <upload-file
                    ref="uploadRegisterFile"
                    :params="{saveDir: 'bus', type: 'file'}"
                    button-name="上传资料"
                    @on-change="refreshTable($event,'register')"
                  ></upload-file>
                  <Button icon="md-remove" type="error">删除</Button>
                </div>
                <div style="margin-bottom:15px">
                  <Table
                    ref="selection"
                    :columns="columns"
                    :data="dataRegister"
                    border
                    height="350"
                    size="small"
                    stripe
                    @on-selection-change="showSelect('register')"
                  ></Table>
                </div>
                <div style="margin-left:-50px">
                  <FormItem label="注册时间：">
                    <DatePicker
                      v-model="form.register_at"
                      placeholder="选择时间"
                      style="width: 500px"
                      type="date"
                      @on-change="form.register_at=$event"
                    ></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="行驶证">
                <div class="top"></div>
                <FormItem label="行驶证上传：">
                  <upload-pic-thumb
                    ref="uploadVehicleTravelLicense"
                    :params="{saveDir: 'bus', type: 'image'}"
                    @on-change="form.vehicle_travel_license_url=$event"
                  ></upload-pic-thumb>
                </FormItem>
                <div class="fromItem"></div>
                <div class="fromItem">
                  <FormItem label="有效期：">
                    <DatePicker placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="购车发票">
                <div class="top"></div>
                <FormItem label="发票上传：">
                  <upload-pic-thumb
                    ref="uploadInvoice"
                    :params="{saveDir: 'bus', type: 'image'}"
                    @on-change="form.invoice_url=$event"
                  ></upload-pic-thumb>
                </FormItem>
                <div class="fromItem"></div>
                <div class="fromItem">
                  <FormItem label="有效期：">
                    <DatePicker placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="登记证书">
                <div class="top"></div>
                <FormItem label="证书上传：">
                  <upload-pic-thumb-multiple
                    ref="uploadSignCertificate"
                    :params="{saveDir: 'bus', type: 'image'}"
                    @on-change="form.sign_certificate_url=$event"
                  ></upload-pic-thumb-multiple>
                </FormItem>
                <div class="fromItem"></div>
                <div class="fromItem">
                  <FormItem label="有效期：">
                    <DatePicker placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="车辆合格证">
                <div class="top"></div>
                <FormItem label="合格证上传：">
                  <upload-pic-thumb
                    ref="uploadQualifiedCertificate"
                    :params="{saveDir: 'bus', type: 'image'}"
                    @on-change="form.qualified_certificate_url=$event"
                  ></upload-pic-thumb>
                </FormItem>
                <div class="fromItem"></div>
                <div class="fromItem">
                  <FormItem label="有效期：">
                    <DatePicker placeholder="选择时间" style="width: 500px" type="date"></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="二级维护单">
                <div class="btns">
                  <upload-file
                    ref="uploadMaintenanceFile"
                    :params="{saveDir: 'bus', type: 'file'}"
                    button-name="上传资料"
                    @on-change="refreshTable($event,'maintenance')"
                  ></upload-file>
                  <Button icon="md-remove" type="error">删除</Button>
                </div>
                <div style="margin-bottom:15px">
                  <Table
                    ref="selection"
                    :columns="columns"
                    :data="dataMaintenance"
                    border
                    height="350"
                    size="small"
                    stripe
                    @on-selection-change="showSelect('maintenance')"
                  ></Table>
                </div>
                <div style="margin-left:-50px">
                  <FormItem label="维护时间：">
                    <DatePicker
                      v-model="form.maintenance_at"
                      placeholder="选择时间"
                      style="width: 500px"
                      type="date"
                      @on-change="form.maintenance_at=$event"
                    ></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="气瓶年检">
                <div class="btns">
                  <upload-file
                    ref="uploadGusFile"
                    :params="{saveDir: 'bus', type: 'file'}"
                    button-name="上传资料"
                    @on-change="refreshTable($event,'gus')"
                  ></upload-file>
                  <Button icon="md-remove" type="error">删除</Button>
                </div>
                <div style="margin-bottom:15px">
                  <Table
                    ref="selection"
                    :columns="columns"
                    :data="dataCylinderAnnualInspection"
                    border
                    height="350"
                    size="small"
                    stripe
                    @on-selection-change="showSelect('gus')"
                  ></Table>
                </div>
                <div style="margin-left:-50px">
                  <FormItem label="气瓶年检时间：">
                    <DatePicker
                      v-model="form.cylinder_annual_inspection_at"
                      placeholder="选择时间"
                      style="width: 500px"
                      type="date"
                      @on-change="form.cylinder_annual_inspection_at=$event"
                    ></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
              <TabPane label="车辆技术评定">
                <div class="btns">
                  <upload-file
                    ref="uploadTechnicalFile"
                    :params="{saveDir: 'bus', type: 'file'}"
                    button-name="上传资料"
                    @on-change="refreshTable($event,'technical')"
                  ></upload-file>
                  <Button icon="md-remove" type="error">删除</Button>
                </div>
                <div style="margin-bottom:15px">
                  <Table
                    ref="selection"
                    :columns="columns"
                    :data="dataTechnicalAssessment"
                    border
                    height="350"
                    size="small"
                    stripe
                    @on-selection-change="showSelect('technical')"
                  ></Table>
                </div>
                <div style="margin-left:-50px">
                  <FormItem label="车辆技术评定：">
                    <DatePicker
                      v-model="form.technical_assessment_at"
                      placeholder="选择时间"
                      style="width: 500px"
                      type="date"
                      @on-change="form.technical_assessment_at=$event"
                    ></DatePicker>
                  </FormItem>
                </div>
              </TabPane>
            </Tabs>
          </div>
          <div style="height:50px;"></div>
          <div class="fromItem">
            <FormItem label>
              <Button
                :loading="submitLoading"
                icon="md-checkmark-circle"
                style="margin-right:10px"
                type="primary"
                @click="handleSubmit('busForm')"
              >保存修改
              </Button>
            </FormItem>
          </div>
        </Form>
      </div>
    </div>
  </Card>
</template>
<script>
import UploadFile from '../my-components/upload-file'
import UploadPicThumb from '../my-components/upload-pic-thumb'
import UploadPicThumbMultiple from '../my-components/upload-pic-thumb-multiple'
import {edit, update} from '../../api/bus'

export default {
  components: {
    UploadFile,
    UploadPicThumb,
    UploadPicThumbMultiple,
  },
  data() {
    return {
      submitLoading: false,
      submitResetLoading: false,
      form: {
        batch: '',
        brand: '',
        model: '',
        engine_num: '',
        frame_nun: '',
        license_plate_num: '',
        original: '',
        discount: '',
        net_worth: '',
        old_license_plate_num: '',
        issue_at: '',
        max_num: '',
        start_use_at: '',
        length: '',
        voucher: '',
        is_check: '',
        type: '',
        note: '',
        start_at: '',
        register_at: '',
        maintenance_at: '',
        cylinder_annual_inspection_at: '',
        technical_assessment_at: '',
        vehicle_travel_license_url: '',
        invoice_url: '',
        sign_certificate_url: '',
        qualified_certificate_url: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
        // {
        //   title: '备注',
        //   key: 'note',
        //   align: 'center',
        // },
      ],
      formValidate: {
        brand: [
          {
            required: true,
            message: '车辆品牌不能为空',
            trigger: 'change',
            type: 'number'
          }
        ],
        type: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: 'change',
            type: 'number'
          }
        ],
        license_plate_num: [
          {required: true, message: '车牌号不能为空', trigger: 'blur'}
        ]
      },
      dataStart: [],
      dataRegister: [],
      dataInsurance: [],
      dataMaintenance: [],
      dataCylinderAnnualInspection: [],
      dataTechnicalAssessment: [],
      startSelectList: [],
      registerSelectList: [],
      maintenanceSelectList: [],
      cylinderAnnualInspectionSelectList: [],
      technicalAssessmentSelectList: [],
      startSelectCount: [],
      registerSelectCount: [],
      maintenanceSelectCount: [],
      cylinderAnnualInspectionSelectCount: [],
      technicalAssessmentSelectCount: []
    }
  },
  watch: {
    $route: function () {
      if (this.$route.params.id !== undefined) {
        this.loadData()
      }
    }
  },
  mounted() {
    if (this.$route.params.id !== undefined) {
      this.loadData()
    } else {
      this.$store.commit('closeTag', 'editVehicle')
      this.$router.push({
        name: 'vehicle'
      })
    }
  },
  methods: {
    handleReset() {
      this.$refs.busForm.resetFields()
      this.form = {
        batch: '',
        brand: '',
        model: '',
        engine_num: '',
        frame_nun: '',
        license_plate_num: '',
        original: '',
        discount: '',
        net_worth: '',
        old_license_plate_num: '',
        issue_at: '',
        max_num: '',
        start_use_at: '',
        length: '',
        voucher: '',
        type: '',
        is_check: '',
        note: '',
        start_at: '',
        register_at: '',
        maintenance_at: '',
        cylinder_annual_inspection_at: '',
        technical_assessment_at: '',
        vehicle_travel_license_url: '',
        invoice_url: '',
        sign_certificate_url: '',
        qualified_certificate_url: ''
      }
      this.dataStart = []
      this.dataRegister = []
      this.dataMaintenance = []
      this.dataInsurance = []
      this.dataCylinderAnnualInspection = []
      this.dataTechnicalAssessment = []
    },
    handleSubmit(name) {
      this.$refs.busForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          const data = {
            base: this.form,
            qualification_file: {
              start: this.dataStart,
              register: this.dataRegister,
              maintenance: this.dataMaintenance,
              gus: this.dataCylinderAnnualInspection,
              technical: this.dataTechnicalAssessment
            }
          }
          update(data, this.form.id).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'editVehicle')
              this.$router.push({
                name: 'vehicle',
                params: {param_type: 'edit', id: this.form.id}
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    loadData() {
      this.handleReset()
      edit(this.$route.params.id).then(res => {
        this.form = res.data.base
        this.dataStart = res.data.qualification_file.start
        this.dataRegister = res.data.qualification_file.register
        this.dataMaintenance = res.data.qualification_file.maintenance
        this.dataCylinderAnnualInspection = res.data.qualification_file.gus
        this.dataTechnicalAssessment = res.data.qualification_file.technical

        this.$refs.uploadVehicleTravelLicense.handleClearFiles()
        this.$refs.uploadVehicleTravelLicense.setData(
          res.data.base.vehicle_travel_license_url
        )
        this.$refs.uploadInvoice.handleClearFiles()
        this.$refs.uploadInvoice.setData(res.data.base.invoice_url)
        this.$refs.uploadSignCertificate.handleClearFiles()
        this.$refs.uploadSignCertificate.setData(
          res.data.base.sign_certificate_url
        )
        this.$refs.uploadQualifiedCertificate.handleClearFiles()
        this.$refs.uploadQualifiedCertificate.setData(
          res.data.base.qualified_certificate_url
        )
      })
    },
    refreshTable(event, table) {
      switch (table) {
        case 'start':
          this.dataStart.push(event.detail)
          break
        case 'register':
          this.dataRegister.push(event.detail)
          break
        case 'maintenance':
          this.dataMaintenance.push(event.detail)
          break
        case 'gus':
          this.dataCylinderAnnualInspection.push(event.detail)
          break
        case 'technical':
          this.dataTechnicalAssessment.push(event.detail)
          break
      }
    },
    showSelect(event, table) {
      switch (table) {
        case 'start':
          this.startSelectList = event
          this.startSelectCount = event.length
          break
        case 'register':
          this.registerSelectList = event
          this.registerSelectCount = event.length
          break
        case 'maintenance':
          this.maintenanceSelectList = event
          this.maintenanceSelectCount = event.length
          break
        case 'gus':
          this.cylinderAnnualInspectionSelectList = event
          this.cylinderAnnualInspectionSelectCount = event.length
          break
        case 'technical':
          this.technicalAssessmentSelectList = event
          this.technicalAssessmentSelectCount = event.length
          break
      }
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
